﻿
@{
    ViewBag.Title = "实时故障数据分析";
}
<link href="~/Content/bootstrap-datepicker.min.css" rel="stylesheet"/>
<link href="~/Content/RealTimeFault/index.css" rel="stylesheet" />
<section class="content">
    <!--内容标题-->
    <div class="content-title row">
        <div class="col-md-5">
            <h3 class="title-brand">实时故障数据分析</h3>
        </div>
        <div class="col-md-7">
            <form class="title-form form-inline" action="">
                <div class="form-group">
                    <label class="control-label" for="">部件选择</label> <span class="glyphicon glyphicon-search"></span>
                    @Html.DropDownList("ComponentSelect", (IEnumerable<SelectListItem>)ViewBag.ComponentSelectList, new { @class = "form-control" })
                </div>
                <div class="form-group">
                    <label class="control-label" for="">日期选择</label> <span class="glyphicon glyphicon-search"></span>
                    @*@Html.DropDownList("DateSelect", (IEnumerable<SelectListItem>)ViewBag.DateSelectList, new { @class = "form-control" })*@
                    <input type="text" class="form-control" id="datePicker" />
                    <button id="btnOK" class="btn btn-default form-control" type="button">确定</button>
                    
                </div>
                <div class="form-group">
                    <button type="button" class="btn btn-default form-control" id="btnToday">最近一天数据</button>
                </div>
                
            </form>
        </div>
    </div>

    <div class="container-fluid">
        <div class="content-component row">
            <!--故障组件信息-->
            <div class="col-md-6">
                <!--布局图-->
                <div class="panel panel-map panel-default">
                    <div class="panel-heading">
                        <div class="panel-title">实时故障布局显示</div>
                    </div>
                    <div class="panel-body">
                        <div id="map-wrap">
                            <div id="map">
                            </div>
                        </div>
                    </div>
                </div>
                <!--部件故障表格-->
                <div class="panel panel-default panel-componentTable">
                    <div class="panel-heading">
                        <div class="panel-title">实时故障数据每日汇总</div>
                    </div>
                    <div class="panel-body">
                        <table id="componentTable" class="table table-hover table-striped">
                            <thead>
                                <tr>
                                    <th>序号#</th>
                                    <th>风机名称</th>
                                    <th>部件名称</th>
                                    <th>故障时间(m)</th>
                                </tr>
                            </thead>
                            <tbody id="componentTbody"></tbody>
                        </table>
                    </div>

                </div>
            </div>
            <!--故障传感器信息-->
            <div class="col-md-6">
                <h4 class="sensor-title"><strong>传感器数据对比曲线</strong></h4>
                <div id="chart-wrap"></div>
            </div>
        </div>
    </div>
</section>

<!--风机布局图信息框-->
<div id="map-tip">
    <p><span id="map-tip-turbine"></span>号风机</p>
    <p id="map-tip-msg"></p>
</div>


@section scripts{
    <script src="~/Scripts/echarts.min.js"></script>
    <script src="~/Scripts/bootstrap-datepicker.min.js"></script>
    <script src="~/Scripts/bootstrap-datepicker.zh-CN.min.js"></script>

    <script src="~/Scripts/RealTimeFault/drawCharts.js"></script>

    <!--左侧导航显示-->
    <script>
        $(function () {
            //展开当前左侧栏父节点
            $("#RealTime").addClass("in");
            $("#RealTime>li:first>a").addClass("sidebar-active");
        });
    </script>

    <!--页面初始化-->
    <script>
        var _componentFaultData;  //页面保存一天所有部件的故障数据
        var mapLoaded = false;   //布局图载入完成标志
        var dataLoaded = false;   //布局图数据载入完成标志 (布局图和布局图数据分别异步载入)
        var btnIsClicked = false;

        $(function () {
            $("#map").load("/Content/images/turbine.svg", function () {
                mapLoaded = true;   //布局图载入完成
                if (dataLoaded) {
                    drawMapColor();
                }
            });

            initialDatePicker();
            bindBtnOK();

            initialSelects();
            initialComponentTable();
        })
    </script>

    <!--处理DatePicker-->
    <script>
        function initialDatePicker() {
            $("#datePicker").val('@ViewBag.LastDay');
            $('#datePicker').datepicker({
                format: "yyyy-mm-dd",
                language: "zh-cn",
                autoclose: true
            });
        }

        function bindBtnOK() {
            $("#btnOK").click(function () {
                var day = $("#datePicker").val();
                btnIsClicked = false;
                getComponentTableData(day);   //改变日期，重新读取数据并填充
            })
        }
    </script>

    <!--处理布局图图标-->
    <script>
        var turb;   //当前风机
        var normalTransform=0;   //正常的Transform参数值
        //鼠标覆盖风机，放大
        var turb_mouseover = function (e) {
            //show tip
            var tid = $(e.currentTarget).attr("tId");
            showMapTip(tid, e.clientX + 10, e.clientY + 30);

            //If IE
            if (IsIE()) return;
            //If else
            turb = $("#t" + tid);
            normalTransform = turb.attr("transform");
            var c = normalTransform.match(/\d{1,3},\d{1,3}/).toString().split(',');
            var lgTransform = "translate(" + String(c[0] - 5) + "," + String(c[1] - 5) + ") scale(1.2,1.2)";  //放大后的Transform参数值
            turb.attr("transform", lgTransform);

        }
        //鼠标移出风机，还原
        var turb_mouseout = function (e) {
            //hide tip
            $("#map-tip").hide();

            //if IE
            if (IsIE()) return;
            //if else
            turb.attr("transform", normalTransform);
        }

        //显示提示框
        var showMapTip = function (tid, x, y) {
            var msg = "";
            $.each(_componentFaultData, function (key, value) {
                if (value["TurbineId"] == tid) {
                    msg = value["ComponentName"] + " : " + value["TotalTime"] + " 分钟\n";
                }
            })
            if (msg != "") {
                $("#map-tip").css({ "left": x, "top": y });
                $("#map-tip-turbine").text(tid);
                $("#map-tip-msg").text(msg);
                $("#map-tip").show();
            }
        }

        //绘制风机图标颜色
        var drawMapColor = function () {
            $("#map svg path").css("fill", "#FFF");   //全部置白
            var red = [];
            $.each(_componentFaultData, function (key, value) {
                $("#map #t" + value["TurbineId"] + " path").css("fill", "#FFFF00");
                if (value["TotalTime"] >= 1000) {
                    red.push(value["TurbineId"]);
                }
            })
            red.forEach(function (id) {
                $("#map #t" + id + " path").css("fill", "#FF6600");
            })
        }

    </script>

    <!--处理Component下拉菜单及Table-->
    <script>
        //绑定下拉列表事件
        var initialSelects = function () {
            //部件下拉列表
            $("#ComponentSelect").change(function () {
                if (_componentFaultData != null) {   //判断是否首次打开页面，首次打开则数据不为空，跳过
                    fillComponentTable(_componentFaultData);   //改变部件，使用现用数据填充
                    bindTrClick();   //绑定表格行点击事件

                    //填充表格后，开始填充图表
                    var turbineId = $("#componentTbody tr:first-child").find("span.TurbineId").text();
                    var componentId = $("#componentTbody tr:first-child").find("span.ComponentId").text()
                    loadCharts(turbineId, componentId);
                }
            })

            //日期下拉列表
            $("#DateSelect").change(function () {
                var day = $("#DateSelect").val();
                btnIsClicked = false;
                getComponentTableData(day);   //改变日期，重新读取数据并填充
            })

            $("#btnToday").click(function () {
                getComponentTableDataOfLastDay();   //读取最近一天数据并填充
                btnIsClicked = true;
            })
        }

        //初始化表格数据
        var initialComponentTable = function () {
            //日期下拉列表默认被选项
            var day = $("#datePicker").val();
            getComponentTableData(day);
        }

        //改变日期后，重新获取表格数据，清空并写入
        var getComponentTableData = function (day) {
            var data = { "day": day };   //参数必须为json对象，且key与后台参数同名
            $.getJSON('@Url.Action("GetComponentFaultData", "RealTimeFault")', data, function (result) {
                _componentFaultData = result;

                dataLoaded = true;   //布局图数据载入完成

                if (mapLoaded) {
                    drawMapColor();
                }
                //填充数据
                fillComponentTable(result);
                //绑定表格行点击事件
                bindTrClick();
                //填充表格后，开始填充图表
                var turbineId = $("#componentTbody tr:first-child").find("span.TurbineId").text();
                var componentId = $("#componentTbody tr:first-child").find("span.ComponentId").text()
                loadCharts(turbineId, componentId);
            })
        }

        //重新最近一天获取表格数据，清空并写入
        var getComponentTableDataOfLastDay = function () {
            $.getJSON('@Url.Action("GetComponentFaultDataOfLastDay", "RealTimeFault")', function (result) {
                _componentFaultData = result;

                dataLoaded = true;   //布局图数据载入完成

                if (mapLoaded) {
                    drawMapColor();
                }
                //填充数据
                fillComponentTable(result);
                //绑定表格行点击事件
                bindTrClick();
                //填充表格后，开始填充图表
                var turbineId = $("#componentTbody tr:first-child").find("span.TurbineId").text();
                var componentId = $("#componentTbody tr:first-child").find("span.ComponentId").text()
                loadChartsOfLastDay(turbineId, componentId);
            })
        }

        //填充表格
        function fillComponentTable(data) {
            $("#componentTbody").empty();  //清空表格

            //填充数据
            var componentId = $("#ComponentSelect").val();
            var index = 0;
            $.each(data, function (key, value) {
                if (componentId == 0 || value["ComponentId"] == componentId) {
                    index++;
                    $("#componentTbody").append("<tr>"
                        + "<td>" + index + "</td>"
                        + "<td><span class='TurbineId'>" + value["TurbineId"] + "</span>" + value["TurbineName"] + "</td>"
                        + "<td><span class='ComponentId'>" + value["ComponentId"] + "</span>" + value["ComponentName"] + "</td>"
                        + "<td>" + value["TotalTime"] + "</td>"
                        + "</tr>");
                }
            })

            $("#componentTbody tr").removeClass("success");
            $("#componentTbody tr:first-child").addClass("success");
        }

        //绑定表格行点击事件
        function bindTrClick() {
            $("#componentTbody tr").click(function () {
                $("#componentTbody tr").removeClass("success");
                var turbineId = this.children[1].children[0].innerHTML;
                var componentId = this.children[2].children[0].innerHTML;
                if (btnIsClicked) {
                    loadChartsOfLastDay(turbineId, componentId);
                }
                else {
                    loadCharts(turbineId, componentId);
                }
                $(this).addClass("success");
            })
        }
    </script>

    <!--处理图表-->
    <script>
        //装载图表
        var loadCharts = function (turbineId, componentId) {
            //清空图表
            $("#chart-wrap").empty();
            //异步传递参数
            var date = $("#datePicker").val();
            //var date = $("#DateSelect").val();
            var data = { "day": date, "turbineId": turbineId };
            //根据部件不同，调用不同的图表渲染方法 (不同的部件，图表个数，文本，高度，数据源皆不同)
            switch (componentId) {
                case '1':  //部件1
                    //...
                    break;
                case '5':  //部件5：主传动链
                    drawCom5_HTML(componentId,date, '@Url.Action("TenMeanCompare","RealTimeFault")');
                    $.getJSON('@Url.Action("GetCom5_SensorData", "RealTimeFault")', data, function (result) { drawCom5_Chart(result, turbineId) });
                    break;
                default:
            }
        }

        //装载图表
        var loadChartsOfLastDay = function (turbineId, componentId) {
            //清空图表
            $("#chart-wrap").empty();

            var data = {"turbineId": turbineId };
            //根据部件不同，调用不同的图表渲染方法 (不同的部件，图表个数，文本，高度，数据源皆不同)
            switch (componentId) {
                case '1':  //部件1
                    //...
                    break;
                case '5':  //部件5：主传动链
                    drawCom5_HTML(componentId, "",'@Url.Action("TenMeanCompare","RealTimeFault")');
                    $.getJSON('@Url.Action("GetCom5_SensorDataOfLastDay", "RealTimeFault")',data, function (result) { drawCom5_Chart(result, turbineId) });
                    break;
                default:
            }
        }
    </script>
}



